<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="utf-8" content="text/html;charset=utf-8">
	<title></title>
	<link rel="stylesheet" th:href="@{/PearAdmin/component/layui/css/layui.css}" />
	<link rel="stylesheet" th:href="@{/PearAdmin/admin/css/pearCommon.css}"/>
</head>
<body class="pear-container">
<div class="layui-card">
	<div class="layui-card-body">
		<form class="layui-form" action="">
			<div class="layui-form-item">
				<label class="layui-form-label">用户名</label>
				<div class="layui-input-inline">
					<input type="text" name="nickName" placeholder="" class="layui-input">
				</div>
				<label class="layui-form-label">账号</label>
				<div class="layui-input-inline">
					<input type="text" name="userName" placeholder="" class="layui-input">
				</div>
				<button id="user-query" class="pear-btn pear-btn-md pear-btn-primary" lay-submit="" lay-filter="user-query">
					<i class="layui-icon layui-icon-search"></i>
					查询
				</button>

				<button type="reset" class="pear-btn pear-btn-md">
					<i class="layui-icon layui-icon-refresh"></i>
					重置
				</button>
			</div>
		</form>
	</div>
</div>
<div class="layui-card">
	<div class="layui-card-body">
		<table id="user-table" lay-filter="user-table"></table>
	</div>
</div>

<script type="text/html" id="user-toolbar">
	<button class="pear-btn pear-btn-primary pear-btn-md" lay-event="add">
		<i class="layui-icon layui-icon-add-1"></i>
		新增
	</button>
	<button class="pear-btn pear-btn-danger pear-btn-md" lay-event="batchRemove">
		<i class="layui-icon layui-icon-delete"></i>
		删除
	</button>
</script>

<script type="text/html" id="user-bar">
	<button class="pear-btn pear-btn-primary pear-btn-sm" lay-event="edit"><i class="layui-icon layui-icon-edit"></i></button>
	<button class="pear-btn pear-btn-danger pear-btn-sm" lay-event="remove"><i class="layui-icon layui-icon-delete"></i></button>
</script>

<script type="text/html" id="user-status">
	<input type="checkbox"  name="status"  value="{{d.status}}" lay-skin="switch" lay-text="启用|禁用"  mid={{d.id}}  lay-filter="user-status" {{ d.status == '1' ? 'checked' : '' }}>
</script>


<script type="text/html" id="user-createTime">
	{{layui.util.toDateString(d.createTime, 'yyyy-MM-dd HH:mm:ss')}}
</script>

<script th:src="@{/PearAdmin/component/layui/layui.js}" charset="utf-8"></script>
<script>
	layui.use(['table','form','jquery'],function () {
		let table = layui.table;
		let form = layui.form;
		let $ = layui.jquery;
		let MODULE_PATH = "operate/";
		let cols = [
			[
				{type:'checkbox'},
				{title: '账号', field: 'userName', align:'center', width:100},
				{title: '姓名', field: 'nickName', align:'center'},
				{title: '电话', field: 'phone', align:'center'},
				{title: '邮箱', field: 'email', align:'center'},
				{title: '启用', field: 'status', align:'center', templet:'#user-status'},
				{title: '创建时间', field: 'createTime', align:'center',templet:'#user-createTime'},
				{title: '操作', toolbar: '#user-bar', align:'center', width:130}
			]
		]

		var tableIns =table.render({
			elem: '#user-table',
			url: '/api/user',
			page: true ,
			cols: cols ,
			skin: 'line',
			toolbar: '#user-toolbar',
			defaultToolbar: [{
				layEvent: 'refresh',
				icon: 'layui-icon-refresh',
			}, 'filter', 'print', 'exports']
		});

		table.on('tool(user-table)', function(obj){
			if(obj.event === 'remove'){
				window.remove(obj);
			} else if(obj.event === 'edit'){
				window .edit(obj);
			}
		});

		table.on('toolbar(user-table)', function(obj){
			if(obj.event === 'add'){
				window.add();
			} else if(obj.event === 'refresh'){
				window.refresh();
			} else if(obj.event === 'batchRemove'){
				window.batchRemove(obj);
			}
		});

		form.on('submit(user-query)', function(data){
			var formData = data.field;
			var userName = formData.userName;
			var	nickName=formData.nickName;
			tableIns.reload({
				page: {
					curr: 1 //重新从第 1 页开始
				}
				, where: {//这里传参  向后台
					userName: userName,
					nickName: nickName
					//可传多个参数到后台...  ，分隔
				}
				, url: '/api/user'//后台做模糊搜索接口路径
				, method: 'get'
			});
			return false;
		});

		form.on('switch(user-status)', function(obj){
			layer.tips(this.value + ' ' + this.name + '：'+ obj.elem.checked, obj.othis);
		});

		window.add = function(){
			layer.open({
				type: 2,
				title: '新增',
				shade: 0.1,
				area: ['500px', '500px'],
				content:  '/api/user/add'
			});
		}

		window.edit = function(obj){
			var data = obj.data;
			layer.open({
				type: 2,
				title: '修改',
				shade: 0.1,
				area: ['500px', '500px'],
				content:  '/api/user/edit/?id='+data.id
			});
		}

		window.remove = function(obj){
			layer.confirm('确定要删除该用户', {icon: 3, title:'提示'}, function(index){
				layer.close(index);
				let loading = layer.load();
				$.ajax({
					url: "/api/user?id="+obj.data['id'],
					dataType:'json',
					type:'delete',
					success:function(result){
						layer.close(loading);
						if(result.success){
							layer.msg(result.msg,{icon:1,time:1000},function(){
								obj.del();
							});
						}else{
							layer.msg(result.msg,{icon:2,time:1000});
						}
					}
				})
			});
		}

		window.batchRemove = function(obj){
			let data = table.checkStatus(obj.config.id).data;
			if(data.length === 0){
				layer.msg("未选中数据",{icon:3,time:1000});
				return false;
			}
			let ids = "";
			for(let i = 0;i<data.length;i++){
				ids += data[i].id+",";
			}
			ids = ids.substr(0,ids.length-1);
			layer.confirm('确定要删除这些用户', {icon: 3, title:'提示'}, function(index){
				layer.close(index);
				let loading = layer.load();
				$.ajax({
					url: MODULE_PATH+"batchRemove/"+ids,
					dataType:'json',
					type:'delete',
					success:function(result){
						layer.close(loading);
						if(result.success){
							layer.msg(result.msg,{icon:1,time:1000},function(){
								table.reload('user-table');
							});
						}else{
							layer.msg(result.msg,{icon:2,time:1000});
						}
					}
				})
			});
		}

		window.refresh = function(param){
			table.reload('user-table');
		}
	})
</script>
</body>
</html>
